<template>
  <div class="hello">
    <header-page title="首 页"/>
    <router-link class="link" active-class="active-class" to="/css">CSS</router-link>
    <router-link class="link" to="/css/flex">Flex</router-link>
    <router-link class="link" to="/demo/input">验证码输入实现</router-link>
    <router-link class="link" active-class="active-class" to="/vue/lifeCycle">生命周期test</router-link>
    <a class="link" @click="changeCM">切换组件</a>
    <!-- <keep-alive>
      <component :is="component" />
    </keep-alive> -->

    <div>{{$store.getters.nameFall}}</div>
    <div>{{$store.getters.namea}}</div>
    <div>{{$store.getters['one/namea']}}</div>
    <div>{{$store.state.one.age}}</div>
    <div>{{$store.state.two.age}}</div>
    <div>{{$store.state.age}}</div>
  </div>
</template>

<script>
import HeaderPage from './../components/common/header';
import flex from '../page/css/flex';
import css from '../page/css/index';

export default {
  components: {
    HeaderPage,
    flex,
    css,
  },
  data() {
    return {
      component: 'flex',
    };
  },
  mounted() {
    console.log('store', this.$store);
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      // console.log(xhr);
    };
    xhr.open('get', '/api/test', true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
    xhr.send({ id: 1 });
  },
  methods: {
    changeCM() {
      // this.component = this.component === 'css' ? 'flex' : 'css';
      // 切换state值
      // 切换modules里面的state
      this.$store.dispatch({
        // type: 'actionsChangeAge',
        // 对于有命名空间的 modules
        type: 'one/actionsChangeAge',
        age: 30,
      });
      console.log(this.$store.state.age);
      this.$store.dispatch({
        // type: 'actionsChangeAge',
        // 没有命名空间的module这样的写法也会调用 two模块和根store实例的actionsChangeAge方法
        type: 'actionsChangeAge',
        age: 'from two action',
      });
    },
  },
};
</script>

<style lang="less" scoped>
.active-class{
  color: red;
}
</style>
